import arrayInput from "./arrayInput";
import {makeid} from '../utils'

let numTypes = [
  'left',
  'top',
  'right',
  'bottom',
  'width',
  'height',
  'padding-left',
  'padding-right',
  'padding-top',
  'padding-bottom',
  'margin-left',
  'margin-right',
  'margin-top',
  'margin-bottom',
]

let colorTypes = [
  'color',
  'background-color',
  'border-color',
  'border-left-color',
  'border-right-color',
  'border-top-color',
  'border-bottom-color',
]

let urlTypes = [
  'background-image',
]

let suggets = {
  position: [
    'absolute',
    'relative',
    'fixed'
  ],
  'background-repeat': [
    'no-repeat',
  ]
}

export default function (options) {
  if (options && options.onLoad) {
    options.onLoad()
  }

  return {
    props: ['value'],
    components: {
      arrayInput: arrayInput({
        getArrayStr(myArray) {
          // console.log(myArray)
          // let str = myArray.map(v => {
          //   return `${v.key}:${v.value}`
          // }).join(';')
          let obj = {}
          myArray.forEach(v => {
            obj[v.key] = v.value
          })
          return obj
        },
        parseToArr(value, makeid) {
          return value
            .split(',')
            .filter(v => v)
            .map(v => v.trim())
            .map(v => {
              // let [key, value] =v.split(':')
              let key = 'ctp-' + makeid(6)
              let value = v

              return {
                id: makeid(10),
                key,
                value
              }
            })
        }
      })
    },
    template:
      `
<div class="prop-style-input">
  <array-input ref="arr"  @del="onInput" @add="onAdd"
  :showinput="false"
  >
    <template slot="item" slot-scope="scope">
      <template v-if="getType(scope.item.key) === 'num'">
        <coma-number :value="scope.item.value"
                     :units="units"
                     @change="onInput(scope.item, $event)"
        ></coma-number>
      </template>
      <template v-else-if="getType(scope.item.key) === 'color'">
        <comc-color :value="scope.item.value"
                    @change="onInput(scope.item, $event)"></comc-color>
      </template>
      <template v-else-if="getType(scope.item.key) === 'url'">
        <comd-input :value="scope.item.value"
                    :units="['url']"
                    @change="onInput(scope.item, $event)"></comd-input>
      </template>
      <template v-else>
        <comb-input
            :value="scope.item.value"
            :list="getList(scope.item.key)"
            @change="onInput(scope.item, $event)"></comb-input>
      </template>
    </template>
  </array-input>

</div>      
`,
    data() {
      return {
        units: ['rem', 'px', 'vw', 'vh', '%', 'em']
      }
    },
    methods: {
      onInput(item, e) {
        // console.log(item, e)
        item.value = e
        window.globalArrayInputContext = this
        // this.$emit('input', this.$refs.arr.getArrayStr)
      },
      compile() {
        this.$emit('input', this.$refs.arr.getArrayStr)
      },
      getType(key) {
        if (numTypes.includes(key)) {
          return 'num'
        }
        else if(colorTypes.includes(key)) {
          return 'color'
        }
        else if(urlTypes.includes(key)) {
          return 'url'
        }
        else {
          return ''
        }
      },
      getList(key) {
        if (suggets[key]) {
          return suggets[key]
        }
        return []
      },
      onAdd({propName, context}) {
        if (numTypes.includes(propName)) {
          context.addMyArray(`${propName + '-' + makeid(3)}:-1`)
        } else {
          context.addMyArray(`${propName + '-' + makeid(3)}:`)
        }
        // this.$nextTick(() => {
        //   this.$emit('input', this.$refs.arr.getArrayStr)
        // })
      }
    },
    mounted() {
      // console.log(this.value)
      if (this.value) {
        this.$refs.arr.genMyArray(this.value)
      }
    }
  }

}
